<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/layout}">
<head>

</head>
<body>
<div layout:fragment="content">
    <h1 th:text="#{user.editPassword}">修改密码</h1>
    <div>
        <form id="userForm" class="form-horizontal" th:action="@{/user/editPassword}" th:object="${password}" method="post">
            <div class="form-group">
                <label for="oldPassword" class="col-sm-1 control-label"  th:text="#{user.oldPassword}">原密码</label>
                <div class="col-sm-2">
                    <input type="password" th:field="*{oldPassword}" class="form-control" required minlength="5" maxlength="20" th:placeholder="#{user.oldPassword}"/>
                    <p th:if="${#fields.hasErrors('oldPassword')}" th:errors="*{oldPassword}" class="error">原密码错误</p>
                </div>
                <label for="newPassword" class="col-sm-1 control-label" th:text="#{user.newPassword}">新密码</label>
                <div class="col-sm-2">
                    <input type="password" th:field="*{newPassword}" class="form-control" required minlength="5" maxlength="20" th:placeholder="#{user.newPassword}"/>
                    <p th:if="${#fields.hasErrors('newPassword')}" th:errors="*{newPassword}" class="error">新密码错误</p>
                </div>
                <label for="confirmPassword" class="col-sm-2 control-label" th:text="#{user.confirmPassword}">确认新密码</label>
                <div class="col-sm-2">
                    <input type="password" th:field="*{confirmPassword}" class="form-control" required minlength="5" maxlength="20" th:placeholder="#{user.confirmPassword}"/>
                    <p th:if="${#fields.hasErrors('confirmPassword')}" th:errors="*{confirmPassword}" class="error">确认新密码错误</p>
                </div>
            </div>
            <div class="form-group">
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-5">
                    <input type="submit" th:value="#{submit}" class="btn btn-info"/>
                </div>
            </div>
        </form>
    </div>
</div>
<th:block layout:fragment="pagescript">

    <script th:src="@{/js/jquery-viladate/jquery.validate.min.js}"></script>
    <script th:src="@{/js/jquery-viladate/messages_zh.min.js}"></script>
    <script th:inline="javascript">
        $(document).ready(function () {
            $("#userForm").validate({
                rules: {
                    confirmPassword: {
                        equalTo: "#newPassword"
                    }
                },
                submitHandler: function(form) {
                    form.submit();
                },
                invalidHandler: function(form, validator) {return false;}
            });
        });
    </script>
</th:block>
</body>
</html>
